<template>
  <div class="home">
    <sell-card>
      <div
        class="header"
        slot="header"
      >
        <home-card
          v-for="item in arr"
          :key="item.id"
          :title="item.title"
          :icon="item.icon"
          :iconColor="item.iconColor"
          :num="item.num"
        />
      </div>
      <div>
        <div
          :style="{ width: w + 'px' }"
          class="echarts"
          ref="chartRef"
        ></div>
      </div>
    </sell-card>
  </div>
</template>
<script>
import SellCard from '@/components/SellCard'
import HomeCard from '@/components/HomeCard'
import * as echarts from 'echarts'
import { getHomeData } from '@/api/order'
import mixins from '@/mixins'
export default {
  mixins: [mixins],
  data() {
    return {
      arr: [
        {
          id: 1,
          title: '总订单',
          icon: 'icon-order',
          iconColor: '#ff0000',
          num: 10000
        },
        {
          id: 2,
          title: '总销售额',
          icon: 'icon-money',
          iconColor: '#00ff00',
          num: 23689
        },
        {
          id: 3,
          title: '今日订单',
          icon: 'icon-order1',
          iconColor: '#0000ff',
          num: 4654561
        },
        {
          id: 4,
          title: '今日销售额',
          icon: 'icon-money',
          iconColor: '#ff6700',
          num: 888888
        }
      ]
    }
  },
  methods: {
    // 画出首页的图
    drawStack(xData, orderData, amountData) {
      // 1. 初始化
      const homeChart = echarts.init(this.$refs.chartRef)

      // 2. 写配置
      const option = {
        // 颜色
        color: ['#80FFA5', '#00DDFF'],
        // 标题
        title: {
          text: '数据统计',
          left: 10,
          top: 10,
          textStyle: {
            fontSize: 16
          }
        },
        // 工具提示
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985'
            }
          }
        },
        // 图例 (要和数据有对应关系)
        legend: {
          data: ['订单', '销售额'],
          top: 10
        },
        // 工具箱
        toolbox: {
          // 工具箱我需要的功能
          feature: {
            dataView: {},
            magicType: {
              type: ['stack', 'bar']
            },
            restore: {},
            saveAsImage: {}
          }
        },
        // 网络
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            data: xData // x轴的数据
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '订单',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(128, 255, 165)'
                },
                {
                  offset: 1,
                  color: 'rgb(1, 191, 236)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: orderData
          },
          {
            name: '销售额',
            type: 'line',
            stack: 'Total',
            smooth: true,
            lineStyle: {
              width: 0
            },
            showSymbol: false,
            areaStyle: {
              opacity: 0.8,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: 'rgb(0, 221, 255)'
                },
                {
                  offset: 1,
                  color: 'rgb(77, 119, 255)'
                }
              ])
            },
            emphasis: {
              focus: 'series'
            },
            data: amountData
          }
        ]
      }

      // 3. 使用配置生成echarts
      homeChart.setOption(option)

      // echarts调用resize适配
      window.addEventListener('resize', () => {
        homeChart.resize() // 调用echarts内置的方法 echarts就可以跟着容器大小变化
      })
    }
  },
  mounted() {
    getHomeData().then((res) => {
      const {
        totalOrder,
        totalAmount,
        todayOrder,
        totayAmount,
        xData,
        orderData,
        amountData
      } = res
      // console.log(res)
      // 赋值渲染
      // this.arr[0].num = totalOrder;
      // this.arr[1].num = totalAmount;
      // this.arr[2].num = todayOrder;
      // this.arr[3].num = totayAmount;
      // 渲染卡片
      ;[totalOrder, totalAmount, todayOrder, totayAmount].forEach((v, i) => {
        this.arr[i].num = v
      })

      // 渲染echarts
      this.drawStack(xData, orderData, amountData)
    })
  },
  components: {
    SellCard,
    HomeCard
  }
}
</script>
<style lang="scss" scoped>
.home {
  background-color: #fff;
  .header {
    display: flex;
    justify-content: space-between;
    background-color: #f1f2f3;
    padding: 20px;
  }

  .echarts {
    height: 400px;
  }
}
</style>
